/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable react/no-array-index-key */
/* eslint-disable no-unused-vars */
import React, { PropsWithChildren, useRef, useEffect } from 'react';
import { Carousel } from 'antd';
import './index.scss';
import { Slider } from '@/typings/slider';

type Props = PropsWithChildren<{
    childern?: any;
    sliders: Slider[];
    getSliders?: any;
}>

function HomeSliders(props: Props) {
  useEffect(() => {
    if (props.sliders.length === 0) {
      props.getSliders();
    }
  }, []);
  return (
    <Carousel effect="scrollx" autoplay>
      {props.sliders.map((item: Slider, index: number) => (
        <div key={index}>
          <img src={item.url} />
        </div>
    ))}
    </Carousel>
  );
}
export default HomeSliders;
